//主色调 

@mc: #3190e8;

// border-color 

@bc: #e4e4e4;

// 字体颜色 

@fc: #ffffff;

//背景颜色 

@bgc: #e5e5e5;

/* 
    定义圆角
    @radius 圆角大小
*/

.radius(@radius: 5px) {
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
}

//背景图片
.back-img(@url){
    background-image: url(@url);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

//宽高
.wh(@width,@height){
    width: @width;
    height: @height;
}

//字体大小、行高、字体
.font(@size,@line-height,@family: 'Microsoft YaHei'){
    font: @size/@line-height @family;
}

//字体大小，颜色
.sc(@size,@color){
    font-size: @size;
    color: @color;
}

//定位全屏
.allcover {
    position: absolute;
    top: 0;
    right: 0;
}

//定位上下左右居中
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

//定位左右居中
.cl {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

//定位上下居中
.ct {
    position: absolute;
    left: 50%;
    transform: translateY(-50%);
}

//flex布局和子元素对齐方式
.fj(@type:space-between) {
    display: flex;
    justify-content: @type;
}